<template>
  <div class="statistics" :style="{minHeight:$store.state.minHeight+'rem'}">
    <header>
      <div class="top">
        <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
        <span>商户统计</span>
      </div>
      <div class="people">
        <div>5000</div>
        <div>今日客户总量</div>
      </div>
    </header>
    <div class="customer">
      <div class="ring">
        <ve-ring :data="orgOptions" :settings="chartSettings"></ve-ring>
      </div>
    </div>
    <div class="order">
      <div class="title">有效订单统计</div>
      <div class="profitTab">
        <div v-for="(x,y) in tab_order" class="tab_box" @click="isTabOrder(y)">
          <p :class="presentOrder == y?'':'selected'">{{x.text}}</p>
        </div>
      </div>
      <div class="profitChart">
        <ve-histogram :data="orgOptions1" :settings="chartSettings1" :extend="extend" hight="300"></ve-histogram>
      </div>
    </div>
    <div class="line"></div>
    <div class="profit">
      <div class="profitTabZ">
        <div v-for="(x,y) in tab" class="tab_box" @click="isTab(y)">
          <p :class="present == y?'':'selectedZ'">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="present == y"></p>
          </transition>
        </div>
      </div>
      <div class="profitChartZ">
        <chart ref="chart1" :options="orgOptions2" :auto-resize="true"></chart>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VeRing from 'v-charts/lib/ring.common'
  import VeHistogram from 'v-charts/lib/histogram.common'

    export default {
        name: "statistics",
        data() {

          return {
            chartSettings:{},
            orgOptions: {},
            chartSettings1:{},
            extend:{},
            orgOptions1: {},
            orgOptions2: {},
            orgOptions3: {},
            tab_order:[
              {text:"日"},
              {text:"周"},
              {text:"月"}
            ],
            tab: [
              {text: '日收益'},
              {text: '月收益'},
              {text: '年收益'},
              {text: '累计收益'}
            ],
            money:true,
            present: 0,
            presentOrder: 0,
          }
        },
      components: { VeRing,VeHistogram },
      methods: {
        back() {
          this.$router.back();
        },
        isTab(index){
          this.present = index;
        },
        isTabOrder(index){
          this.presentOrder = index;
        },
      },
      mounted() {
        this.chartSettings = {
          width:"1.3rem",
          height:"1.3rem",
          radius: [40, 70],
          offsetY: 120,
          label:{
            formatter:{
              name:1,
            }
          },
        };
        this.orgOptions = {
          columns: ['类型', '人数'],
          rows: [
            { '类型': '老客户', '人数': 1393 },
            { '类型': '回头客', '人数': 3530 },
            { '类型': '新客户', '人数': 2923 }
          ],
          radius: ['0%', '70%'],
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ]
            }
          ]
        };
        this.chartSettings1 = {
          legendName: {
            'num': '订单量（单）'
          },
          barWidth:'10%',
          itemStyle:{
            color:"#FB4448"
          }
        };
        this.extend = {
          series: {
            label: { show: true, position: "top" }
          },
        };
        this.orgOptions1 = {
          columns: ['time', 'num'],
          rows: [
            { 'time': '1/1', 'num': 1393},
            { 'time': '1/2', 'num': 3530},
            { 'time': '1/3', 'num': 2923},
            { 'time': '1/4', 'num': 1723},
            { 'time': '1/5', 'num': 3792},
            { 'time': '1/6', 'num': 4593}
          ]
        };
        this.orgOptions2 = {
          xAxis: {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020'],
            textStyle: {
              fontSize: 12
            },
          },
          yAxis: {
            type: 'value',
            nameTextStyle: {
              fontSize: 12
            },
            nameGap:-10,
            nameLocation:"end"
          },
          series: [{
            data: [500, 100, 210, 300, 900],
            type: 'line',
            smooth: true
          }]
        };
      },
    }
</script>

<style scoped>
  .profitTab{
    width: 2.9rem;
    height: 100%;
    max-height: .45rem;
    padding: .02rem .2rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
    border-radius: .2rem;
    border: 1px solid #FB4948;
  }

  .profitTab .tab_box {
    height: 100%;
    width: 33%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .profitTab .tab_box > p{
    color: #ffffff;
    height: .25rem;
    font-size: .14rem;
    line-height: .25rem;
    padding: 0;
    border-radius: .2rem;
    background: linear-gradient(0deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
  }

  .echarts{
    width: 3.5rem;
    height: 2.6rem;
    margin: 0 auto;
  }
  .profitTabZ {
    width: calc(100% - .4rem);
    height: 100%;
    max-height: .45rem;
    padding: 0 .2rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }

  .profitTabZ .tab_box {
    height: 100%;
    max-height: .55rem;
    padding: 0 .1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .profitTabZ .tab_box > p:nth-child(1) {
    color: #FB4448;
    font-size: .13rem;
    line-height: .16rem;
    padding: .15rem 0 .13rem;
  }

  .profitTabZ .tab_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FF300D;
    border-radius: .01rem;
  }


  .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .selectedZ {
    color: #333333 !important;
    font-size: .13rem !important;

  }
  .selected {
    color: #FC4B48 !important;
    font-size: .14rem !important;
    background: none !important;
  }

  .statistics{

  }
  .statistics header{
    width: 100%;
    height: 1.86rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    color: #ffffff;
  }
  .statistics header > div > img {
    width: .11rem;
    height: .18rem;
  }

  .statistics header > div > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
    flex-grow: 1;
    text-align: center;
  }

  .statistics header .top{
    height: .5rem;
    display: flex;
    align-items: center;
    padding: 0 .1rem;
  }
  .statistics header .people{
    text-align: center;
    font-size: .12rem;
  }
  .statistics header .people div:nth-child(1){
    font-size: .24rem;
    font-weight: bold;
    padding-bottom: .05rem;
  }
  .statistics .ring{
    background: #ffffff;
    width: 3.5rem;
    height: 2.1rem;
    overflow: hidden;
    margin: -.7rem auto 0;
    border-radius: .1rem;
    box-shadow:1px 5px 8px 0px rgba(78,78,78,0.15);
  }
  .statistics .order{
    padding: .2rem;
  }
  .statistics .order .title{
    font-size: .15rem;
    color: #292929;
    margin-bottom: .2rem;
  }
  .statistics .line{
    width: 100%;
    height: .04rem;
    background: #E5E5E5;
  }
  .statistics .profitChart{
    height: 3.4rem;
    overflow: hidden;
  }
</style>
